<template>
	<view class="container">
		<view class="no-cart" v-if="cartGoods.length <= 0 && cartGoodsDisabled.length <= 0">
			<view class="c">
				<view class="title-box">
					购物车空空如也～
				</view>
				<view class="to-index-btn bg-set" @tap="toIndexPage">
					去逛逛
				</view>
			</view>
		</view>
		<view v-else>
			<!-- #ifdef MP || H5-->
			<view class="tui-edit-goods" v-if="cartGoods.length > 0">
				<view>购物车已选<text class="tui-bold">{{cartTotal.checkedGoodsCount}}</text>件商品</view>
				<view>
          <tui-button :plain="true" shape="circle" width="160rpx" height="60rpx" :size="24" type="danger"
						@click="editGoods">{{isEdit?"完成":"编辑商品"}}</tui-button>
				</view>
			</view>
			<!-- #endif -->

			<checkbox-group>
				<view class="tui-cart-cell tui-mtop" v-for="(cart,index) in cartGoods" :key="index">
					<tui-list-cell :hover="false" :arrow="true" @click="switchShops(cart)">
						<view class="tui-goods-title">
							<tui-icon name="shop" :size="22"></tui-icon><text
								class="shops-name">{{cart.name||''}}</text>
						</view>
					</tui-list-cell>
					<view class="tui-goods-item" v-for="(item, i) in cart.cartList" :key="i">
						<label class="tui-checkbox" @tap="checkedItem(index, i)">
							<checkbox :value="item.id" :checked="item.checked === 1" color="yellow"></checkbox>
						</label>
						<image :src="item.listPicUrl" class="tui-goods-img" :data-id="item.goodsId"
							@tap="navToGoodsDetail" />
						<view class="tui-goods-info">
							<view class="tui-goods-title">
								{{item.goodsName}}
							</view>
              <view class="tui-goods-model" @click="updateSkuShow(item)">
								<view class="tui-model-text">{{item.goodsSpecifitionNameValue||''}}</view>
                <tui-icon name="arrowdown" :size="16" color="#333"></tui-icon>
							</view>
							<view class="tui-price-box">
								<view class="tui-goods-price tui-bold">￥{{item.retailPrice | getPrice}}</view>
								<tui-numberbox :height="36" :width="64" :min="item.minSell||1" :step="1" :index="index"
									:custom="item" :value="item.number" @change="changeNum">
								</tui-numberbox>
							</view>
						</view>
					</view>
				</view>
			</checkbox-group>

			<!--商品失效-->
			<view class="tui-cart-cell  tui-mtop" v-if="cartGoodsDisabled.length>0">
				<view class="tui-activity">
					<view class="tui-bold">失效商品</view>
					<view class="tui-buy">
						<tui-button type="gray" :plain="true" shape="circle" width="200rpx" height="56rpx" :size="24"
							@click="clearDisable">
							清空失效商品</tui-button>
					</view>
				</view>
				<view :class="{'tui-invalid-ptop':index!==0}" v-for="(item,index) in cartGoodsDisabled" :key="index">
					<tui-swipe-action :actions="actions" @click="deleteCartByItem({'item':item})" :params="item">
						<template v-slot:content>
							<view class="tui-goods-item">
								<view class="tui-checkbox tui-invalid-pr">
									<view class="tui-invalid-text">失效</view>
								</view>
								<image :src="item.listPicUrl" class="tui-goods-img" />
								<view class="tui-goods-info">
									<view class="tui-goods-title tui-gray">
										{{item.goodsName}}
									</view>
									<view class="tui-price-box tui-flex-center">
										<view class="tui-goods-invalid">产品失效</view>
									</view>
								</view>
							</view>
						</template>
					</tui-swipe-action>
				</view>
			</view>
		</view>
		<view v-if="footprintList.length >0">
			<!--猜你喜欢-->
			<tui-divider :size="28" :bold="true" color="#333" width="50%">
				<tui-icon name="like" :size="18" class="default-color"></tui-icon>
				<text class="tui-youlike">猜你喜欢</text>
			</tui-divider>
			<view class="tui-product-list">
				<view class="tui-product-container">
					<block v-for="(item,index) in footprintList" :key="index" v-if="(index+1)%2!=0">
						<!--商品列表-->
						<view class="tui-pro-item" hover-class="hover" :hover-start-time="150" :data-id="item.goodsId"
							@tap="navToGoodsDetail">
							<image :src="item.listPicUrl" class="tui-pro-img" mode="widthFix" />
							<view class="tui-pro-content">
								<view class="tui-pro-tit">{{item.goodsName}}</view>
								<view>
									<view class="tui-pro-price">
										<text class="tui-sale-price">￥{{item.retailPrice}}</text>
										<text class="tui-factory-price">￥{{item.marketPrice}}</text>
									</view>
									<view class="tui-pro-pay">{{item.sales||0}}人付款</view>
								</view>
							</view>
						</view>
						<!--商品列表-->
						<!-- <template is="productItem" data="{{item,index:index}}" /> -->
					</block>
				</view>
				<view class="tui-product-container">
					<block v-for="(item,index) in footprintList" :key="index" v-if="(index+1)%2==0">
						<!--商品列表-->
						<view class="tui-pro-item" hover-class="hover" :hover-start-time="150" :data-id="item.goodsId"
							@tap="navToGoodsDetail">
							<image :src="item.listPicUrl" class="tui-pro-img" mode="widthFix" />
							<view class="tui-pro-content">
								<view class="tui-pro-tit">{{item.goodsName}}</view>
								<view>
									<view class="tui-pro-price">
										<text class="tui-sale-price">￥{{item.retailPrice}}</text>
										<text class="tui-factory-price">￥{{item.marketPrice}}</text>
									</view>
									<view class="tui-pro-pay">{{item.sales||0}}人付款</view>
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>
		</view>
		<!--tabbar-->
		<view class="tui-tabbar" v-if="cartGoods.length > 0">
			<view class="tui-checkAll">
				<checkbox-group @change="checkedAll">
					<label class="tui-checkbox">
						<checkbox :checked="checkedAllStatus ? true : false" color="yellow"></checkbox>
						<text class="tui-checkbox-pl">全选</text>
					</label>
				</checkbox-group>
				<view class="tui-total-price" v-if="!isEdit">合计:<text
						class="tui-bold">￥{{cartTotal.checkedGoodsAmount | getPrice}}</text>
				</view>
			</view>
			<view>
        <tui-button width="200rpx" height="70rpx" :size="30" shape="circle" v-if="!isEdit" type="danger"
					@click="checkoutOrder">去结算({{cartTotal.checkedGoodsCount}})</tui-button>
        <tui-button width="200rpx" height="70rpx" :size="30" shape="circle" :plain="true" type="danger"
					@click="deleteCart" v-else>删除</tui-button>
			</view>
		</view>

    <!--底部选择层-->
    <tui-bottom-popup :show="openAttr" tui-popup-class="tui-popup" @close="switchAttrPop">
      <view class="tui-popup-box">
        <view class="tui-product-box tui-padding">
          <image :src="selectPic" @click="previewSkuImg(selectPic)" class="tui-popup-img"></image>
          <view class="tui-popup-price">
            <view class="tui-amount tui-bold">￥{{selectPrice}}<text
                class="tui-factory-price tui-line-through">￥{{selectMarketPrice||''}}</text>
            </view>
            <view class="tui-number">编号:{{selectGoodsSn}}</view>
            <view class="tui-number">库存：{{selectStock}}</view>
          </view>
        </view>
        <scroll-view scroll-y class="tui-popup-scroll">
          <view class="tui-scrollview-box">
            <view class="tui-bold tui-attr-title" v-for="(attrValueObj, attrIndex) in keyValue"
                  :key="attrIndex">{{attrValueObj.key}}
              <view class="tui-attr-box">
                <view v-for="(value, valueIndex) in attrValueObj.attrValues" :key="valueIndex"
                      :class="'tui-attr-item tui-attr-item-' + (attrIndex==firstIndex || attrValueObj.attrValueStatus[valueIndex]?(value==attrValueObj.selectedValue?'active':''):'disabled')"
                      @tap="selectAttrValue" :data-status="attrValueObj.attrValueStatus[valueIndex]"
                      :data-value="value" :data-key="attrValueObj.key" :data-index="attrIndex" :data-vi="valueIndex"
                      :data-selectedvalue="attrValueObj.selectedValue">{{value}}</view>
              </view>
            </view>
            <view class="tui-number-box tui-bold tui-attr-title">
              <view class="tui-attr-title">数量</view>
              <tui-numberbox :iconSize="22" :height="38" :width="56" :value="number" :step="1"
                             :min="minNumber||1" @change="changeNumber"></tui-numberbox>
            </view>
          </view>
        </scroll-view>
        <view class="tui-operation tui-operation-right tui-right-flex tui-popup-btn">
          <tui-button shape="circle" :size="25" height="60rpx" type="danger" width="600rpx"
                      @click="updateSku">确定</tui-button>
        </view>
        <tui-icon name="close-fill" color="#999" class="tui-icon-close-fill" :size="25" @click="switchAttrPop">
        </tui-icon>
      </view>
    </tui-bottom-popup>
	</view>
</template>

<script>
	const util = require("@/utils/util.js")
	export default {
		data() {
			return {
        openAttr: false,
        selected: '',
        selectPrice: '',
        selectMarketPrice: '',
        selectPic: '',
        selectStock: '',
        selectedText: '',
        selectGoodsSn: '',
        goods: {},
        number: 1,
        minNumber: 1,
        commodityAttr: [],
        includeGroup: [],
        selectGroup: {},// 选中的SKU
        keyValue: [],
				cartGoods: [{
					cartList: []
				}],
				cartGoodsDisabled: [],
				checkedAllStatus: false,
        firstIndex: 0,
				cartIds: [], //购物车id
				cartTotal: {
					"goodsCount": 0,
					"goodsAmount": 0.00,
					"checkedGoodsCount": 0,
					"checkedGoodsAmount": 0.00
				},
				actions: [{
					name: '删除',
					color: '#fff',
					fontsize: 28,
					width: 64,
					background: '#F82400'
				}],
				isEdit: false,
				footprintList: []
			}
		},
		filters: {
			getPrice(price) {
				price = price || 0;
				return price.toFixed(2)
			}
		},
		methods: {
      updateSku: function() {
        var that = this;
        var value = [];
        for (var i = 0; i < that.keyValue.length; i++) {
          if (that.keyValue[i].selectedValue && that.keyValue[i].attrValueStatus[that.keyValue[i].selectedIndex]) {
            value.push(that.keyValue[i].selectedValue);
          }
        }
        if (value.length < that.keyValue.length) {
          util.toast('请选择完整！');
        } else {
          if (!that.includeGroup[0]) {
            util.toast('商家暂未添加商品规格！');
            that.openAttr = !that.openAttr;
            return;
          }
          //更新购物车
          util.request('cart/updateSku', {
            skuId: that.selectGroup.id,
            goodsId: that.goods.id,
            referrerUserId: that.referrerUserId,
            number: that.number,
            selectedText: that.selectedText,
            shopsId: that.goods.shopsId
          }, "POST").then(function(res) {
            let _res = res;
            if (_res.code == 0) {
              that.cartGoods = res.shopsCartList
              that.cartGoodsDisabled = res.disabled
              that.cartTotal = res.cartTotal

              that.checkedAllStatus = that.isCheckedAll()

              that.openAttr = !that.openAttr;
            } else {
              util.toast(_res.msg);
            }
          });
        }
      },
      updateSkuShow: function(item) {
        var that = this;
        that.goods = {}
        that.minNumber = 1
        that.number = 1
        that.selectPrice = ''
        that.selectMarketPrice = ''
        that.selectPic = ''
        that.selectStock = ''
        that.selectGoodsSn = ''
        that.commodityAttr = []
        that.includeGroup = that.commodityAttr
        that.keyValue = []

        util.request('goods/goodsCartDetail', {
          goodsId: item.goodsId
        }).then(function(res) {
          if (res.code === 0) {
            that.goods = res.data.info
            that.minNumber = that.goods.minSell || 1
            that.number = that.minNumber
            that.selectPrice = res.data.info.retailPrice
            that.selectMarketPrice = res.data.info.marketPrice
            that.selectPic = res.data.info.listPicUrl
            that.selectStock = res.data.info.goodsNumber
            that.selectGoodsSn = res.data.info.goodsSn

            that.commodityAttr = res.data.info.goodsSkuEntityList;
            that.includeGroup = res.data.info.goodsSkuEntityList;
            that.distachAttrValue(that.commodityAttr);
            if (that.openAttr == false) {
              //打开规格选择窗口
              that.openAttr = !that.openAttr;
            }
          }
        });

      },
      changeNumber: function(event) {
        this.number = event.value;
      },
      /* 获取数据 */
      distachAttrValue: function(commodityAttr) {
        /**
         将后台返回的数据组合成类似
         {
				key:'型号',
				keyValue:['1','2','3']
				}
         */
            // 把数据对象的数据（视图使用），写到局部内
        var keyValue = this.keyValue;
        // 遍历获取的数据
        for (var i = 0; i < commodityAttr.length; i++) {
          for (var j = 0; j < commodityAttr[i].keyValue.length; j++) {
            var attrIndex = this.getAttrIndex(commodityAttr[i].keyValue[j].key, keyValue);
            // console.log('属性索引', attrIndex);
            // 如果还没有属性索引为-1，此时新增属性并设置属性值数组的第一个值；索引大于等于0，表示已存在的属性名的位置
            if (attrIndex >= 0) {
              // 如果属性值数组中没有该值，push新值；否则不处理
              if (!this.isValueExist(commodityAttr[i].keyValue[j].value, keyValue[attrIndex].attrValues)) {
                keyValue[attrIndex].attrValues.push(commodityAttr[i].keyValue[j].value);
              }
            } else {
              keyValue.push({
                key: commodityAttr[i].keyValue[j].key,
                attrValues: [commodityAttr[i].keyValue[j].value]
              });
            }
          }
        }
        for (var i = 0; i < keyValue.length; i++) {
          for (var j = 0; j < keyValue[i].attrValues.length; j++) {
            if (keyValue[i].attrValueStatus) {
              keyValue[i].attrValueStatus[j] = true;
            } else {
              keyValue[i].attrValueStatus = [];
              keyValue[i].attrValueStatus[j] = true;
            }
          }
        }
        this.keyValue = keyValue;
      },
      getAttrIndex: function(attrName, keyValue) {
        // 判断数组中的attrKey是否有该属性值
        for (var i = 0; i < keyValue.length; i++) {
          if (attrName == keyValue[i].key) {
            break;
          }
        }
        return i < keyValue.length ? i : -1;
      },
      isValueExist: function(value, valueArr) {
        // 判断是否已有属性值
        for (var i = 0; i < valueArr.length; i++) {
          if (valueArr[i] == value) {
            break;
          }
        }
        return i < valueArr.length;
      },
      /* 选择属性值事件 */
      selectAttrValue: function(e) {
        /*
        点选属性值，联动判断其他属性值是否可选
        {
        key:'型号',
        keyValue:['1','2','3'],
        selectedValue:'1',
        attrValueStatus:[true,true,true]
        }
        console.log(e.currentTarget.dataset);
        */
        var keyValue = this.keyValue;
        var index = e.currentTarget.dataset.index; //属性索引
        var key = e.currentTarget.dataset.key;
        var value = e.currentTarget.dataset.value;
        var valueindex = e.currentTarget.dataset.vi;
        if (e.currentTarget.dataset.status || index == this.firstIndex) {
          if (e.currentTarget.dataset.selectedvalue == e.currentTarget.dataset.value) {
            // 取消选中
            this.disSelectValue(keyValue, index, key, value, valueindex);
          } else {
            // 选中
            this.selectValue(keyValue, index, key, value, valueindex);
          }
        }
      },
      /* 选中 */
      selectValue: function(keyValue, index, key, value, valueindex) {
        var includeGroup = [];
        keyValue[index].selectedValue = value;
        keyValue[index].selectedIndex = valueindex;
	    keyValue[index].selectedKey = key;

        var commodityAttr = this.includeGroup;
        for (var i = 0; i < commodityAttr.length; i++) {
          for (var j = 0; j < commodityAttr[i].keyValue.length; j++) {
			  // 判断属性是否可选
			  for (var si = 0; si < keyValue.length; si++) {
				  if (commodityAttr[i].keyValue[j].key == keyValue[si].selectedKey
						  && commodityAttr[i].keyValue[j].value == keyValue[si].selectedValue) {
					  includeGroup.push(commodityAttr[i]);
				  }
			  }
          }
        }

        // 判断属性是否可选
        for (var i = 0; i < keyValue.length; i++) {
          for (var j = 0; j < keyValue[i].attrValues.length; j++) {
            keyValue[i].attrValueStatus[j] = false;
          }
        }
        for (var i = 0; i < includeGroup.length; i++) {
          var flag = includeGroup[i].keyValue.every(function (ikv, ikvIndex) {
            if (keyValue[ikvIndex].key === ikv.key) {
              return keyValue[ikvIndex].selectedValue === ikv.value
            }
            return true;
          })
          // 所有key-value对都命中
          if (flag) {
            this.selectGroup = includeGroup[i];
          }
          for (var k = 0; k < keyValue.length; k++) {
            for (var j = 0; j < includeGroup[i].keyValue.length; j++) {
              if (keyValue[k].key == includeGroup[i].keyValue[j].key) {
                for (var m = 0; m < keyValue[k].attrValues.length; m++) {
                  if (keyValue[k].attrValues[m] == includeGroup[i].keyValue[j].value) {
                    keyValue[k].attrValueStatus[m] = true;
                  }
                }
              }
            }
          }
        }
        this.keyValue = keyValue;

        var count = 0;
        for (var i = 0; i < keyValue.length; i++) {
          for (var j = 0; j < keyValue[i].attrValues.length; j++) {
            if (keyValue[i].selectedValue) {
              count++;
              break;
            }
          }
        }
        if (count < 2) { // 第一次选中，同属性的值都可选
          this.firstIndex = index
        } else {
          this.firstIndex = -1
        }
        this.setSelect();
      },
      /* 取消选中 */
      disSelectValue: function(keyValue, index, key, value, valueindex) {
        var that = this;
        var commodityAttr = that.commodityAttr;
        keyValue[index].selectedValue = '';
        keyValue[index].selectedIndex = '';

        // 判断属性是否可选
        for (var i = 0; i < keyValue.length; i++) {
          for (var j = 0; j < keyValue[i].attrValues.length; j++) {
            keyValue[i].attrValueStatus[j] = true;
          }
        }
        this.keyValue = keyValue;
        this.includeGroup = commodityAttr;
        this.selectGroup = {};

        for (var i = 0; i < keyValue.length; i++) {
          if (keyValue[i].selectedValue) {
            that.selectValue(keyValue, i, keyValue[i].key, keyValue[i].selectedValue, valueindex);
          }
        }
        that.setSelect();
      },
      setSelect: function() {
        var that = this;
        var valueStr = "";
        var value = [];
        var selectedText = '';
        for (var i = 0; i < that.keyValue.length; i++) {
          if (that.keyValue[i].selectedValue && that.keyValue[i].attrValueStatus[that.keyValue[i].selectedIndex]) {
            value.push(that.keyValue[i].selectedValue);
            selectedText += that.keyValue[i].key + '：' + that.keyValue[i].selectedValue + '；'
          }
        }
        for (var i = 0; i < value.length; i++) {
          valueStr += value[i] + ",";
        }
        valueStr = valueStr.substr(0, valueStr.length - 1)
        that.selected = valueStr

        if (!that.selectGroup.id || !valueStr) {
          that.selectPic = that.goods.listPicUrl
          that.selectMarketPrice = that.goods.marketPrice
          that.selectPrice = that.goods.retailPrice
          that.selectStock = that.goods.goodsNumber
          that.selectGoodsSn = that.goods.goodsSn
          that.selectedText = selectedText
          return;
        }
        that.selectPic = that.selectGroup.listPicUrl || that.goods.listPicUrl
        that.selectMarketPrice = that.selectGroup.marketPrice
        that.selectPrice = that.selectGroup.retailPrice
        that.selectStock = that.selectGroup.goodsNumber
        that.selectGoodsSn = that.selectGroup.goodsSn
        that.selectedText = selectedText
        that.minNumber = that.selectGroup.minSell || 1
        that.number = that.minNumber
      },
      previewSkuImg(url) {
        uni.previewImage({
          urls: [url], // 需要预览的图片http链接列表
        })
      },
      switchAttrPop: function() {
        this.openAttr = !this.openAttr;
      },
			switchShops(item) {
				uni.navigateTo({
					url: `/pages/shops/shops?shopsSn=${item.shopsSn}&shopsId=`+item.id
				})
			},
			toIndexPage: function() {
				uni.switchTab({
					url: "/pages/index/index"
				});
			},
			getCartList: function() {
				let that = this;
				util.request('cart/myCart').then(function(res) {
					if (res.code === 0) {
						that.cartGoods = res.shopsCartList
						that.cartGoodsDisabled = res.disabled
						that.cartTotal = res.cartTotal

            that.checkedAllStatus = that.isCheckedAll()

            that.getFootprintList();
					}
				});
			},
			isCheckedAll: function() {
				//判断购物车商品已全选
				let result = true;
				for (let i = 0; i < this.cartGoods.length; i++) {
					let element = this.cartGoods[i]
					for (let j = 0; j < element.cartList.length; j++) {
						if (element.cartList[j].checked === 0) {
							result = false;
						}
					}
				}
				return result;
			},
			getFootprintList() {
				let that = this;
				util.request('user/footprintList').then(function(res) {
					if (res.code === 0) {
						if (res.data.records) {
							that.footprintList = res.data.records
						}
					}
				});
			},
			changeNum: function(event) {
				let that = this;
				let cartItem = event.custom;
				let number = event.value;
				cartItem.number = number;
				that.cartGoods = that.cartGoods;
				that.updateCart(cartItem.goodsId, number, cartItem.id);
			},
			updateCart: function(goodsId, number, id) {
				let that = this;

				util.request('cart/update', {
					goodsId: goodsId,
					number: number,
					id: id
				}, 'POST').then(function(res) {
					if (res.code === 0) {
						that.cartGoods = res.shopsCartList
						that.cartGoodsDisabled = res.disabled
						that.cartTotal = res.cartTotal
					}
					that.checkedAllStatus = that.isCheckedAll()
				});

			},
			clearDisable: function() {
				//获取已选择的商品
				let cartIds = [];
				this.cartGoodsDisabled.forEach((item) => {
					cartIds.push(item.id)
				})
				this.cartDelete(cartIds.join(','))
			},
			deleteCartByItem: function(event) {
				//获取已选择的商品
				let cartIds = [event.item.id];
				this.cartDelete(cartIds.join(','))
			},
			editGoods: function() {
				this.isEdit = !this.isEdit;
			},
			navToGoodsDetail: function(e) {
				uni.navigateTo({
					url: '/pages/goods/goods?id=' + e.currentTarget.dataset.id
				});
			},
			checkedAll() {
				let that = this;
				let cartIds = [];
				for (let i = 0; i < this.cartGoods.length; i++) {
					let element = this.cartGoods[i]
					for (let j = 0; j < element.cartList.length; j++) {
						cartIds.push(element.cartList[j].id)
					}
				}
				util.request('cart/checked', {
					cartIds: cartIds,
					isChecked: that.isCheckedAll() ? 0 : 1
				}, 'POST').then(function(res) {
					if (res.code === 0) {
						that.cartGoods = res.shopsCartList
						that.cartGoodsDisabled = res.disabled
						that.cartTotal = res.cartTotal
					}
					that.checkedAllStatus = that.isCheckedAll()
				});
			},
			deleteCart: function() {
				//获取已选择的商品
				let that = this;

				let cartSelectGoods = [];
				for (let i = 0; i < this.cartGoods.length; i++) {
					let element = this.cartGoods[i]
					for (let j = 0; j < element.cartList.length; j++) {
						if (element.cartList[j].checked == true) {
							cartSelectGoods.push(element.cartList[j].id)
						}
					}
				}
				if (cartSelectGoods.length <= 0) {
					return false;
				}
				that.cartDelete(cartSelectGoods.join(','))
			},
			cartDelete(cartIds) {
				let that = this;
				util.request('cart/delete', {
					cartIds: cartIds,
					shopsId: that.shopsId
				}, 'POST').then(function(res) {
					if (res.code === 0) {
						that.cartGoods = res.shopsCartList
						that.cartGoodsDisabled = res.disabled
						that.cartTotal = res.cartTotal
					}
					that.checkedAllStatus = that.isCheckedAll()
				});
			},
			checkedItem: function(index, itemIndex) {
				let that = this;

				util.request('cart/checked', {
					id: that.cartGoods[index].cartList[itemIndex].id,
					isChecked: that.cartGoods[index].cartList[itemIndex].checked ? 0 : 1
				}, 'POST').then(function(res) {
					if (res.code === 0) {
						that.cartGoods = res.shopsCartList
						that.cartGoodsDisabled = res.disabled
						that.cartTotal = res.cartTotal
					}
					that.checkedAllStatus = that.isCheckedAll()
				});
			},
			checkoutOrder: function() {
				//获取已选择的商品
				let that = this;
				var checkedGoods = that.cartGoods.filter(function(element, index, array) {
					for (let i = 0; i < element.cartList.length; i++) {
						if (element.cartList[i].checked === 1) {
							return true;
						}
					}
				});

				if (checkedGoods.length <= 0) {
					util.toast('您还没有选择商品哦', 2000, 'none');
					return false;
				}

				uni.navigateTo({
					url: '../shopping/checkout/checkout'
				})
			}
		},
		// 下拉刷新
		onPullDownRefresh: function() {
			// 显示顶部刷新图标
			uni.showNavigationBarLoading();
			var that = this;
			this.getCartList();
			// 隐藏导航栏加载框
			uni.hideNavigationBarLoading();
			// 停止下拉动作
			uni.stopPullDownRefresh();
		},
		onLoad: function(options) {
			uni.setStorageSync("navUrl", "/pages/cart/cart");
		},
		onShow: function() {
			this.isEdit = false;
			// 页面显示
			this.getCartList();
		},
		onNavigationBarButtonTap(e) {
			this.isEdit = !this.isEdit;
			let text = this.isEdit ? "完成" : "编辑";
			// #ifdef APP-PLUS
			let webView = this.$mp.page.$getAppWebview();
			webView.setTitleNViewButtonStyle(0, {
				text: text
			});
			// #endif
		}
	}
</script>

<style lang="scss">
	.container {
    padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
    /* #ifdef H5*/
    padding-bottom: 260rpx;
    /*#endif*/
	}

	.no-cart {
		width: 100%;
		height: auto;
		margin: 0 auto;
	}

	.no-cart .c {
		width: 100%;
		height: auto;
		margin-bottom: 150rpx;
	}

	.no-cart .c image {
		margin: 0 auto;
		display: block;
		text-align: center;
		width: 258rpx;
		height: 258rpx;
	}

	.no-cart .c text {
		margin: 0 auto;
		display: block;
		width: 258rpx;
		height: 29rpx;
		line-height: 29rpx;
		text-align: center;
		font-size: 29rpx;
		color: #999;
	}

	.title-box {
		width: 100%;
		padding-top: 200rpx;
		text-align: center;
		font-size: 28rpx;
		color: #999;
		background: url() no-repeat center 105rpx;
		background-size: 100rpx auto;
		margin-bottom: 50rpx;
	}

	.to-index-btn {
		border-radius: 6px;
		width: 300rpx;
		height: auto;
		line-height: 70rpx;
		text-align: center;
		font-size: 28rpx;
		margin: 0 auto;
		display: block;
	}

	.tui-mtop {
		margin-top: 24rpx;
	}

	.tui-edit-goods {
		width: 100%;
		border-radius: 12rpx;
		overflow: hidden;
		padding: 24rpx 30rpx 0 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #333;
		font-size: 24rpx;
	}

	.tui-cart-cell {
		width: 100%;
		border-radius: 12rpx;
		background: #FFFFFF;
		padding: 10rpx 0;
		overflow: hidden;
	}

	.tui-goods-item {
		display: flex;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.tui-checkbox {
		min-width: 70rpx;
		display: flex;
		align-items: center;
	}

	/* #ifdef MP-WEIXIN */
	.tui-checkbox .wx-checkbox-input {
		width: 40rpx;
		height: 40rpx;
		margin-right: 0 !important;
		border-radius: 50% !important;
		transform: scale(0.8);
		border-color: #d1d1d1 !important;
	}

	.tui-checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		background: #eb0909;
		width: 44rpx !important;
		height: 44rpx !important;
		border: none;
	}

	/* #endif */
	/* #ifndef MP-WEIXIN */

	>>>.tui-checkbox .uni-checkbox-input {
		width: 40rpx;
		height: 40rpx;
		margin-right: 0 !important;
		border-radius: 50% !important;
		transform: scale(0.8);
		border-color: #d1d1d1 !important;
	}

	>>>.tui-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		background: $color-default;
		width: 45rpx !important;
		height: 45rpx !important;
		border: none;
	}

	/* #endif */
	.tui-goods-img {
    width: 160rpx;
    height: 160rpx !important;
    border-radius: 10rpx;
		flex-shrink: 0;
		display: block;
	}

	.tui-goods-info {
		width: 100%;
		padding-left: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		box-sizing: border-box;
		overflow: hidden;
	}

	.tui-goods-title {
		white-space: normal;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 24rpx;
		color: #333;
	}

	.shops-name {
		padding: 0 10rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.tui-goods-model {
		max-width: 100%;
		color: #333;
		background: #F5F5F5;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16rpx;
		box-sizing: border-box;
	}

	.tui-model-text {
		max-width: 100%;
		transform: scale(0.9);
		transform-origin: 0 center;
		font-size: 24rpx;
		line-height: 32rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tui-price-box {
		width: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
	}

	.tui-goods-price {
		font-size: 34rpx;
	}

	.tui-activity {
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx 20rpx 100rpx;
		box-sizing: border-box;
	}

	.tui-buy {
		display: flex;
		align-items: center
	}

	.tui-invalid-text {
		width: 66rpx;
		margin-right: 4rpx;
		text-align: center;
		font-size: 24rpx;
		color: #fff;
		background: rgba(0, 0, 0, .3);
		transform: scale(0.8);
		transform-origin: center center;
		border-radius: 4rpx;
		flex-shrink: 0;
	}

	.tui-gray {
		color: #B2B2B2 !important;
	}

	.tui-goods-invalid {
		color: #555;
		font-size: 24rpx;
	}

	.tui-flex-center {
		align-items: center !important;
	}

	.tui-invalid-ptop {
		padding-top: 40rpx;
	}

	.tui-tabbar {
    width: 100%;
    background: #fff;
    position: fixed;
    left: 0;
    height: 100rpx;
    bottom: 0;
    padding: 0 30rpx;
    /* #ifdef H5 */
    bottom: 50px;
    height: 160rpx;
    padding-bottom:env(safe-area-inset-bottom);
    padding-left: 30rpx;
    /* #endif */
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    font-size: 24rpx;
    z-index: 99;
	}

	.tui-tabbar::before {
		content: '';
		width: 100%;
		border-top: 1rpx solid #d9d9d9;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	.tui-checkAll {
		display: flex;
		align-items: center;
	}

	.tui-checkbox-pl {
		padding-left: 12rpx;
	}

	.tui-total-price {
		padding-left: 30rpx;
		font-size: 30rpx !important;
	}

	/*猜你喜欢*/
	.tui-youlike {
		padding-left: 12rpx
	}

  /*底部选择弹层*/

  .tui-popup {
    border-top-left-radius: 24rpx;
    border-top-right-radius: 24rpx;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .tui-popup-box {
    position: relative;
    padding: 30rpx 0 100rpx 0;
    /* #ifdef H5 */
    padding: 30rpx 0 180rpx 0;
    /* #endif */
  }

  .tui-operation-right {
    height: 100rpx;
    /* box-sizing: border-box; */
    padding-top: 0;
  }

  .tui-right-flex {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tui-flex {
    flex: 1;
    margin: 5rpx 5rpx;
  }

  .tui-btn-equals {
    margin: 10rpx;
    display: block !important;
    font-size: 28rpx !important;
  }

  .tui-popup-btn {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    /* #ifdef H5 */
    bottom: 50px;
    /* #endif */
  }

  .tui-icon-close-fill {
    position: absolute;
    top: 30rpx;
    right: 30rpx;
  }

  .tui-product-box {
    display: flex;
    align-items: flex-end;
    font-size: 24rpx;
  }

  .tui-popup-img {
    height: 200rpx;
    width: 200rpx;
    border-radius: 24rpx;
    display: block;
  }

  .tui-popup-price {
    padding-left: 20rpx;
    padding-bottom: 8rpx;
  }

  .tui-amount {
    font-size: 36rpx;
  }

  .tui-number {
    font-size: 22rpx;
    line-height: 22rpx;
    padding-top: 12rpx;
    color: #999;
  }

  .tui-popup-scroll {
    font-size: 26rpx;
  }

  .tui-scrollview-box {
    padding: 0 30rpx;
    box-sizing: border-box;
  }

  .tui-attr-title {
    padding: 10rpx 0;
    color: #333;
  }

  .tui-attr-box {
    font-size: 0;
    padding: 20rpx 0;
  }

  .tui-attr-item {
    max-width: 100%;
    min-width: 200rpx;
    height: 64rpx;
    display: -webkit-inline-flex;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f7f7f7;
    color: black;
    font-weight: normal;
    padding: 0 26rpx;
    box-sizing: border-box;
    border-radius: 32rpx;
    margin-right: 20rpx;
    margin-bottom: 20rpx;
    font-size: 22rpx;
  }

  .tui-attr-item-disabled {
    color: #ccc;
  }

  .tui-attr-item-active {
    border: 1px solid $color-default;
    font-weight: bold;
    background: $color-default;
    position: relative;
    color: white;
  }

  .tui-attr-item-active::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 40rpx;
    left: 0;
    top: 0;
  }

  .tui-number-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 0 30rpx 0;
    box-sizing: border-box;
  }
</style>
